<template>
  <div class="docker">
    <span :class="{docker__item: true,'docker__item--active': index ==0}" v-for="item,index in dockerList"
    :key="index">
      <i class="iconfont" v-html="item.icon"></i>
      <p class="docker__title">{{item.text}}</p>
    </span>
  </div>
</template>
<script>
export default {
  name: 'Docker',
  setup () {
    const dockerList = [
      { icon: '&#xe6f9;', text: '首页' },
      { icon: '&#xe61d;', text: '购物车' },
      { icon: '&#xe600;', text: '订单' },
      { icon: '&#xe601;', text: '我的' }
    ]
    return { dockerList }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/viriables"; //引入字通用体颜色
.docker {
  box-sizing: border-box;
  padding: 0 0.18rem;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bgColor;
  color: $content-fontcolor;
  &__item {
    flex: 1;
    text-align: center;
    .iconfont {
      margin: 0.07rem 0 0.02rem;
      font-size: 0.18rem;
      display: block;
    }
    &--active {
      color: #1fa4fc;
    }
  }
  &__title {
    font-size: 0.2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
    margin: 0;
  }
}
</style>
